<!--
 * @Description: 
 * @Version: 1.0
 * @Author: tao
 * @Date: 2021-01-15 16:19:27
 * @LastEditors: tao
 * @LastEditTime: 2021-03-13 10:37:27
-->
<template>
  <a-modal
    v-model="visible"
    :centered="true"
    :cancelText="cancelText"
    :okText="okText"
    :keyboard="false"
    :width="width"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div slot="title" class="title">{{ title }}</div>
    <slot name="form"></slot>
    <slot name="card"></slot>

    <template slot="footer" v-if="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="noPass">不通过</a-button>
      <a-button type="primary" @click="handleOk">通过</a-button>
    </template>

    <template slot="footer" v-else>
      <a-button @click="handleCancel">{{ cancelText }}</a-button>
      <a-button type="primary" @click="handleOk">{{ okText }}</a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "弹窗",
    },
    width: {
      type: Number,
      defalut: 520,
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    okText: {
      type: String,
      default: "确定",
    },
    footer: { type: Boolean, default: false },
  },
  data() {
    return {
      visible: this.show,
    };
  },
  watch: {
    show(newVal, oldVal) {
      this.visible = newVal;
    },
  },
  methods: {
    handleOk(e) {
      this.$emit("confirm");
    },
    handleCancel() {
      this.$emit("cancel");
    },
    noPass() {
      this.$emit("noPass");
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  font-weight: bold;
}
</style>